<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能家居控制系统</title>
    <script src="mqtt.min.js"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div class="container header-content">
        <div class="logo">
          <span class="logo-icon">⌂</span>
          <h1>智能家居控制系统</h1>
        </div>
        <div class="header-controls">
          <div class="mqtt-status">MQTT未连接</div>
          <button class="theme-toggle" id="themeToggle">☀️</button>
        </div>
      </div>
    </header>

    <div class="container">
      <nav>
        <ul class="nav-list">
          <li class="nav-item active" data-tab="dashboard-home">
            <span class="nav-icon">🏠</span>
            <span>控制面板</span>
          </li>
          <li class="nav-item" data-tab="dashboard-devices">
            <span class="nav-icon">💡</span>
            <span>设备控制</span>
          </li>
          <li class="nav-item" data-tab="dashboard-climate">
            <span class="nav-icon">🌡️</span>
            <span>气候控制</span>
          </li>
          <li class="nav-item" data-tab="dashboard-security">
            <span class="nav-icon">🔒</span>
            <span>门锁</span>
          </li>
        </ul>
      </nav>

      <main>
        <!-- 主控面板 -->
        <div class="dashboard active" id="dashboard-home">
          <h2 class="section-title">主控面板</h2>

          <!-- 状态卡片 -->
          <div class="card-grid">
            <div class="card status-card">
              <div class="status-info">
                <h3>室内温度</h3>
                <p class="status-value"><span id="temperature">24.5</span>°C</p>
              </div>
              <div class="status-icon">🌡️</div>
            </div>

            <div class="card status-card">
              <div class="status-info">
                <h3>湿度</h3>
                <p class="status-value"><span id="humidity">65</span>%</p>
              </div>
              <div class="status-icon">💧</div>
            </div>

            <div class="card status-card">
              <div class="status-info">
                <h3>活跃设备</h3>
                <p class="status-value">
                  <span id="activeDevices">1</span>/<span id="totalDevices"
                    >5</span
                  >
                </p>
              </div>
              <div class="status-icon">⚡</div>
            </div>
          </div>

          <!-- 快速控制按钮 -->
          <h3 class="section-title" style="font-size: 1.3rem">快速控制</h3>
          <div class="control-buttons">
            <button class="control-btn" data-device="livingRoomLight">
              <span class="control-btn-icon">💡</span>
              <span>客厅灯</span>
            </button>

            <button class="control-btn" data-device="television">
              <span class="control-btn-icon">📺</span>
              <span>电视</span>
            </button>

            <button class="control-btn" data-device="livingRoomFan">
              <span class="control-btn-icon">❄️</span>
              <span>风扇</span>
            </button>

            <button class="control-btn" data-device="securitySystem">
              <span class="control-btn-icon">🔒</span>
              <span>门锁</span>
            </button>
          </div>
        </div>

        <!-- 设备控制 -->
        <div class="dashboard" id="dashboard-devices">
          <h2 class="section-title">设备控制</h2>

          <div class="card-grid">
            <!-- 照明设备 -->
            <div class="card">
              <h3 style="margin-bottom: 15px; font-size: 1.2rem">照明</h3>

              <div class="device-control">
                <span>客厅灯</span>
                <div class="toggle-btn" data-device="livingRoomLight"></div>
              </div>

              <div class="device-control">
                <span>电视</span>
                <div class="toggle-btn" data-device="bedroomLight"></div>
              </div>

              <div class="device-control">
                <span>厨房灯</span>
                <div class="toggle-btn" data-device="kitchenLight"></div>
              </div>
            </div>

            <!-- 空调控制 -->
            <div class="card">
              <h3 style="margin-bottom: 15px; font-size: 1.2rem">空调控制</h3>

              <div class="device-control">
                <span>客厅空调</span>
                <div class="toggle-btn" data-device="livingRoomAC"></div>
              </div>

              <div class="device-control">
                <span>温度设置</span>
                <div style="display: flex; align-items: center; gap: 10px">
                  <button class="temp-btn" id="temp-down">-</button>
                  <span style="font-size: 1.2rem; font-weight: 600"
                    ><span id="ac-temperature">25</span>°C</span
                  >
                  <button class="temp-btn" id="temp-up">+</button>
                </div>
              </div>

              <div class="device-control">
                <span>风速</span>
                <select
                  id="fan-speed"
                  style="
                    padding: 8px;
                    border-radius: 5px;
                    border: 1px solid #ddd;
                  "
                >
                  <option>自动</option>
                  <option>低速</option>
                  <option>中速</option>
                  <option>高速</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- 气候控制 -->
        <div class="dashboard" id="dashboard-climate">
          <h2 class="section-title">气候控制</h2>

          <div class="card-grid">
            <!-- 环境监测 -->
            <div class="card">
              <h3 style="margin-bottom: 20px; font-size: 1.2rem">环境监测</h3>

              <div class="progress-container">
                <div class="progress-info">
                  <span>温度</span>
                  <span><span id="temp-value">24.5</span>°C</span>
                </div>
                <div class="progress-bar">
                  <div
                    class="progress-fill temperature"
                    style="width: 61%"
                  ></div>
                </div>
              </div>

              <div class="progress-container">
                <div class="progress-info">
                  <span>湿度</span>
                  <span><span id="humidity-value">65</span>%</span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill humidity" style="width: 65%"></div>
                </div>
              </div>

              <div class="progress-container">
                <div class="progress-info">
                  <span>空气质量</span>
                  <span>良好</span>
                </div>
                <div class="progress-bar">
                  <div
                    class="progress-fill air-quality"
                    style="width: 75%"
                  ></div>
                </div>
              </div>
            </div>

            <!-- 空调调节 -->
            <div class="card">
              <h3 style="margin-bottom: 10px; font-size: 1.2rem">空调设置</h3>

              <div class="temp-control">
                <div class="temp-display" id="temp-display">25°C</div>

                <div class="temp-buttons">
                  <button class="temp-btn" id="climate-temp-down">-</button>
                  <button class="control-btn" id="climate-ac-toggle">
                    <span class="control-btn-icon">⚡</span>
                  </button>
                  <button class="temp-btn" id="climate-temp-up">+</button>
                </div>

                <div style="margin-top: 30px; width: 100%">
                  <h4 style="margin-bottom: 10px; font-size: 0.9rem">模式</h4>
                  <div
                    style="
                      display: grid;
                      grid-template-columns: repeat(4, 1fr);
                      gap: 5px;
                    "
                  >
                    <button class="control-btn active">制冷</button>
                    <button class="control-btn">制热</button>
                    <button class="control-btn">除湿</button>
                    <button class="control-btn">送风</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 安全系统 -->
        <div class="dashboard" id="dashboard-security">
          <h2 class="section-title">门锁</h2>

          <div class="card-grid">
            <div class="card">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 15px;
                "
              >
                <h3 style="font-size: 1.2rem">系统状态</h3>
                <div
                  id="security-status"
                  style="
                    padding: 5px 10px;
                    border-radius: 20px;
                    font-size: 0.85rem;
                    background-color: #d4edda;
                    color: #155724;
                  "
                >
                  已启用
                </div>
              </div>

              <div class="security-button">
                <button id="security-toggle-btn" class="security-toggle">
                  🔒
                </button>
                <p>点击按钮禁用安全系统</p>
              </div>
            </div>

            <div class="card">
              <h3 style="margin-bottom: 15px; font-size: 1.2rem">安全日志</h3>

              <div class="security-logs">
                <div class="log-item">
                  <div class="log-header">
                    <span class="log-title">系统已启用</span>
                    <span class="log-time">今天 08:30</span>
                  </div>
                </div>

                <div class="log-item">
                  <div class="log-header">
                    <span class="log-title">系统已禁用</span>
                    <span class="log-time">今天 07:15</span>
                  </div>
                </div>

                <div class="log-item">
                  <div class="log-header">
                    <span class="log-title">前门已开启</span>
                    <span class="log-time">今天 07:10</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer>
        智能家居控制系统 © 2025 | MQTT状态:
        <span id="mqtt-status-text">未连接</span>
      </footer>
    </div>

    <script src="script.js"></script>
  </body>
</html>
